<script setup>
// 引用 api
import { ref, computed } from "vue"

// 图书列表
const bookList = ref([
    {
        id: 1,
        bookName: "《JavaScript高级编程》",
        publicationDate: "2006-9",
        price: 85.00,
        count: 1
    },
    {
        id: 2,
        bookName: "《C语言基础》",
        publicationDate: "2006-2",
        price: 59.00,
        count: 1
    },
    {
        id: 3,
        bookName: "《Java高级语言》",
        publicationDate: "2008-10",
        price: 39.00,
        count: 1
    },
    {
        id: 4,
        bookName: "《代码大全》",
        publicationDate: "2006-3",
        price: 128.00,
        count: 1
    },
    {
        id: 5,
        bookName: "《你不知道JavaScript》",
        publicationDate: "2014-8",
        price: 88.00,
        count: 1
    },
])

// 增加函数 
function add(index) {
    if (bookList.value[index].count > 0) {
        bookList.value[index].count--
    }
}

// 移除函数
function remove(index) {
    bookList.value.splice(index, 1)
}

// 合计
const total = computed(() => {
    return bookList.value.reduce((a, b) => {
        return a += b.price * b.count
    }, 0)
})

</script>

<template>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>图书名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(book, index) in bookList" :key="book.id" v-if="bookList.length > 0">
                <td>{{ index + 1 }}</td>
                <td>{{ book.bookName }}</td>
                <td>{{ book.publicationDate }}</td>
                <td>￥{{ book.price.toFixed(2) }}</td>
                <td>
                    <input type="button" value="-" @click="add(index)" :disabled="book.count <= 0">
                    <input type="text" v-model="book.count">
                    <input type="button" value="+" @click="book.count++">
                </td>
                <td>
                    <input type="button" value="移除" @click="remove(index)">
                </td>
            </tr>
            <tr v-else>
                <td colspan="7">购物车为空</td>
            </tr>
        </tbody>
    </table>

    <div class="total">
        <p>合计： <span>￥{{ total }}</span></p>
    </div>
</template>

<style scoped>
*,
body,
html {
    padding: 0;
    margin: 0;
}

.total {
    font-size: 20px;
    color: rgb(253 116 139);
    text-align: center;
}

.total span {
    font-weight: 900;
}

input {
    padding: 10px 15px;
    margin: 2px;
    border-radius: 5px;
    color: rgb(253 116 139);
    border: 2px rgb(223 135 150) solid;
    background-color: rgb(255 169 197);
    font-size: 16px;
    outline: none;
    text-align: center;
}

input:hover {
    color: rgb(255 169 197);
    border: 2px rgb(223 135 150) solid;
    background-color: rgb(253 116 139);
}

input[ type="text"] {
    width: 30px;
    border: 0;
}

table {
    width: 80%;
    border-spacing: 0;
    margin: 10px auto;
    font-size: 20px;
    text-align: center;
}

tr,
th,
td {
    padding: 15px 10px;
    color: rgb(253 116 139);
    border: 1px rgb(223 135 150) solid;
    background-color: rgb(255 169 197);
}
</style>